<template>
	<div style="height: 100%;overflow-y: hidden;">

		<div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 10px;" class="displayFlex">
			<div style="width: 100px;margin-right: 20px;">
				<el-select v-model="params.dateType" placeholder="请选择">
					<el-option key="year" label="按年" value="year">
					</el-option>
					<el-option key="month" label="按月" value="month">
					</el-option>
				</el-select>
			</div>
			<div class="block" v-if="params.dateType == 'month'">
				<span class="demonstration">月份：</span>
				<el-date-picker v-model="params.monthDate" type="month" placeholder="选择月份" @change="getData()">
				</el-date-picker>
			</div>
			<div class="block" v-if="params.dateType == 'year'">
				<span class="demonstration">年份：</span>
				<el-date-picker v-model="params.yearDate" type="year" placeholder="选择年份" @change="getData()">
				</el-date-picker>
			</div>
		</div>

		<div style="height: calc(100% - 60px);overflow-y: auto;">
			<div v-for="(item,index) in dataList" :key="index"
				style="background: #fff;border-radius: 16px;margin-bottom: 10px;padding: 20px;">

				<div style="font-size: 16px;margin-bottom: 10px;">
					<span>{{item.equipmentName}}</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div
							style="background: #3F73FC;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon7.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">车间状态</div>
							</div>

							<div>
								<div class="displayFlex">
									<div>生产</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item.workDays}}</span>
										<span>天</span>
									</div>
								</div>
								<div class="displayFlex">
									<div>停产</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item.notWorkDays}}</span>
										<span>天</span>
									</div>
								</div>
							</div>

							<img src="@/assets/produce/icon1.png"
								style="position: absolute;right: 0;top: 0;width: 240px;height: 120px;" />
						</div>
					</el-col>

					<el-col :span="8">
						<div
							style="background: #F4CF84;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;overflow-y: auto;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon8.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>危废产生量</span>
									<span style="font-size: 10px;">({{item.hwWasteList.length}})</span>
								</div>
							</div>

							<template v-if="item.hwWasteList.length > 0">
								<div class="displayFlex" v-for="(item1,index1) in item.hwWasteList">
									<div>{{item1.name}}</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item1.qty}}</span>
										<span>{{item1.unitValue}}</span>
									</div>
								</div>
							</template>
							<div v-else style="font-weight: bold;text-align: center;">暂无内容</div>

							<img src="@/assets/produce/icon2.png"
								style="position: absolute;right: 0;top: 30px;width: 100px;height: 60px;" />
						</div>
					</el-col>


					<el-col :span="8">
						<div
							style="background: #85C9B5;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;overflow-y: auto;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon10.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>固废产生量</span>
									<span style="font-size: 10px;">({{item.swWasteList.length}})</span>
								</div>
							</div>

							<template v-if="item.swWasteList.length > 0">
								<div class="displayFlex" v-for="(item1,index1) in item.swWasteList">
									<div>{{item1.name}}</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item1.qty}}</span>
										<span>{{item1.unitValue}}</span>
									</div>
								</div>
							</template>
							<div v-else style="font-weight: bold;text-align: center;">暂无内容</div>

							<img src="@/assets/produce/icon4.png"
								style="position: absolute;right: 0;top: 30px;width: 100px;height: 60px;" />
						</div>
					</el-col>
				</el-row>



				<el-row :gutter="20" style="margin-top: 20px;">
					<el-col :span="8">
						<div
							style="background: #A9A7EA;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;overflow-y: auto;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon9.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>原辅料用量</span>
									<span style="font-size: 10px;">({{item.materialList.length}})</span>
								</div>
							</div>

							<template v-if="item.materialList.length > 0">
								<div class="displayFlex" v-for="(item1,index1) in item.materialList">
									<div>{{item1.name}}</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item1.qty}}</span>
										<span>{{item1.unitValue}}</span>
									</div>
								</div>
							</template>
							<div v-else style="font-weight: bold;text-align: center;">暂无内容</div>

							<img src="@/assets/produce/icon3.png"
								style="position: absolute;right: 0;top: 30px;width: 150px;height: 80px;" />
						</div>
					</el-col>

					<el-col :span="8">
						<div
							style="background: #F7A8A4;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;overflow-y: auto;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon11.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>废水排放</span>
									<span style="font-size: 10px;">({{item.waterList.length}})</span>
								</div>
							</div>

							<template v-if="item.waterList.length > 0">
								<div class="displayFlex" v-for="(item1,index1) in item.waterList">
									<div>{{item1.name}}</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item1.qty}}</span>
										<span>{{item1.unitValue}}</span>
									</div>
								</div>
							</template>
							<div v-else style="font-weight: bold;text-align: center;">暂无内容</div>

							<img src="@/assets/produce/icon5.png"
								style="position: absolute;right: 0;top: 30px;width: 100px;height: 60px;" />
						</div>
					</el-col>


					<el-col :span="8">
						<div
							style="background: #3a3ef4;color: #fff;border-radius: 16px;padding: 10px;height: 120px;position: relative;overflow-y: auto;">
							<div class="displayFlex" style="margin-bottom: 10px;">
								<div style="background: #fff;width: 28px;height: 28px;border-radius: 6px;">
									<img src="@/assets/produce/icon12.png" style="width: 20px;height: 20px;margin: 4px;" />
								</div>
								<div style="margin-left: 10px;">
									<span>废气排放</span>
									<span style="font-size: 10px;">({{item.gasList.length}})</span>
								</div>
							</div>

							<template v-if="item.gasList.length > 0">
								<div class="displayFlex" v-for="(item1,index1) in item.gasList">
									<div>{{item1.name}}</div>
									<div style="margin-left: 20px;">
										<span style="font-size: 20px;">{{item1.qty}}</span>
										<span>{{item1.unitValue}}</span>
									</div>
								</div>
							</template>
							<div v-else style="font-weight: bold;text-align: center;">暂无内容</div>

							<img src="@/assets/produce/icon6.png"
								style="position: absolute;right: 0;top: 30px;width: 100px;height: 60px;" />
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		data() {
			return {
				pageIndex: 0,
				pageSize: 10,

				params: {
					dateType: 'year',
					monthDate: moment().format('YYYY-MM-DD'),
					yearDate: moment().format('YYYY-MM-DD'),
					ticketId: '',
				},
				dataList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getData()
		},
		methods: {
			//保存巡检项
			getData() {
				if (that.params.dateType == 'month') that.params.yearDate = ''
				if (that.params.dateType == 'year') that.params.monthDate = ''
				that.ajax({
					url: '/productionEquipment/pageOverview?pageIndex=1&pageSize=10&ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>